<template>
  <div class="canvas-register">
    <el-card class="box-card">
      <div>
        <div class="title">
          Welcome&nbsp;&nbsp;&nbsp;to&nbsp;&nbsp;&nbsp;Register
        </div>
        <el-form
          :model="registerForm"
          :rules="rules"
          ref="registerForm"
          label-position="right"
          label-width="180px"
          class="demo-registerForm"
          hide-required-asterisk
          status-icon
        >
          <el-form-item label="Nickname:" prop="nickname" class="labelSize">
            <el-input
              v-model="registerForm.nickname"
              placeholder="user nickname"
              size="large"
            >
            </el-input>
          </el-form-item>
          <el-form-item label="Phone:" prop="phone" class="labelSize">
            <el-input
              v-model="registerForm.phone"
              placeholder="user phone"
              size="large"
            >
            </el-input>
          </el-form-item>
          <el-form-item label="Password:" prop="password" class="labelSize">
            <el-input
              type="password"
              v-model="registerForm.password"
              :type="flag ? 'text' : 'password'"
              placeholder="user password"
              size="large"
            >
              <i
                slot="suffix"
                :class="[flag ? 'el-icon-minus' : 'el-icon-view']"
                autocomplete="auto"
                @click="flag = !flag"
              />
            </el-input>
          </el-form-item>
          <el-form-item
            label="CheckPassword:"
            prop="checkPassword"
            class="labelSize"
          >
            <el-input
              type="password"
              v-model="registerForm.checkPassword"
              :type="flagCheck ? 'text' : 'password'"
              placeholder="check user password"
              size="large"
            >
              <i
                slot="suffix"
                :class="[flagCheck ? 'el-icon-minus' : 'el-icon-view']"
                autocomplete="auto"
                @click="flagCheck = !flagCheck"
              />
            </el-input>
          </el-form-item>
          <el-form-item label="Email:" prop="email" class="labelSize">
            <el-input
              v-model="registerForm.email"
              placeholder="user email"
              size="large"
            >
            </el-input>
          </el-form-item>
          <el-checkbox v-model="checked" class="agreement">
            <el-button type="text">
              I have read and agreed to the
              <el-link type="danger" @click="dialogVisible = true" class="abc"
                >User Agreement</el-link
              >
            </el-button>
          </el-checkbox>

          <el-dialog
            title="Breast Cancer Risk Analysis System User Agreement"
            :visible.sync="dialogVisible"
            width="50%"
            :append-to-body="true"
          >
            <div>
              1.服务条款的确认和接纳 2.网易邮箱帐号服务简介
              3.网易邮箱帐号注册规则
              <p>
                乳腺癌是乳腺上皮细胞在多种致癌因子的作用下，发生增殖失控的现象。
              </p>
              <p>
                疾病早期常表现为乳房肿块、乳头溢液、腋窝淋巴结肿大等症状，晚期可因癌细胞发生远处转移，出现多器官病变，直接威胁患者的生命。
                乳腺癌常被称为“粉红杀手”，其发病率位居女性恶性肿瘤的首位，男性乳腺癌较为少见。
              </p>
              <p>
                随着医疗水平的提高，乳腺癌已成为疗效最佳的实体肿瘤之一。
                宫颈癌和乳腺癌并称女性两大“隐性杀手”。
              </p>
            </div>
          </el-dialog>

          <el-form-item>
            <el-button type="success" @click="submitForm(registerForm)">
              Register now
            </el-button>
          </el-form-item>
          <el-link type="primary" href="/login" class="return_login"
            >Existing account,Login now</el-link
          >
        </el-form>
      </div>
    </el-card>
    <el-footer class="pa-3">
      <span class="caption">
        &copy; Copyright {{ new Date().getFullYear() }} , LT-BCRA MEDICINE
      </span>
    </el-footer>
  </div>
</template>

<script>
export default {
  name: "Register",

  data() {
    const validatePassword = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("Please enter your password again"));
      } else if (value !== this.registerForm.password) {
        callback(new Error("Passwords do not match twice!"));
      } else {
        callback();
      }
    };
    return {
      flag: false,
      flagCheck:false,
      dialogVisible: false,
      checked: false,
      registerForm: {
        nickname: "",
        phone: "",
        password: "",
        checkPassword: "",
        email: "",
      },
      rules: {
        nickname: [
          { required: true, message: "Please input an id", trigger: "blur" },
          {
            min: 3,
            max: 5,
            message: "The length is between 3 and 5 characters",
            trigger: "blur",
          },
        ],
        phone: [
          {
            required: true,
            message: "Please input a phone number",
            trigger: "blur",
          },
          {
            required: true,
            pattern: /^1[3456789]\d{9}$/,
            message: "Cell phone number format error",
            trigger: "blur",
          },
        ],
        password: [
          {
            required: true,
            message: "Please input a password",
            trigger: "blur",
          },
          {
            min: 6,
            max: 13,
            message: "The length is between 6 and 13 characters",
            trigger: "blur",
          },
        ],
        checkPassword: [{ validator: validatePassword, trigger: "blur" }],
        email: [
          {
            required: true,
            message: "Please input an email",
            trigger: "blur",
          },
          {
            required: true,
            pattern: /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/,
            message: "Mailbox format error",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    submitForm(registerForm) {
      this.$refs.registerForm.validate((valid) => {
        //console.log(registerForm.phone, registerForm.password);
        if (valid) {
          if (this.checked) {
            this.$router.push({
              name: "Login",
              params: {
                phone: registerForm.phone,
                password: registerForm.password,
              },
            });
          } else {
            this.$message({
              type: "error",
              message: "Please check the agreement",
            });
          }
        }
        return false;
      });
    },
  },
};
</script>

<style scoped>
.canvas-register {
  background-image: url("@/assets/img/newlogin.jpg");
  background-repeat: no-repeat;
  /* 放大缩小会让图片改变 */
  background-size: cover;
  position: fixed;
  width: 100%;
  height: 100%;
}
.box-card {
  text-align: center;
  background: rgba(234, 241, 239, 0.76);
  border-radius: 20px;
  width: 40%;
  height: 65%;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.title {
  text-align: center;
  margin-top: 5%;
  font-size: 30px;
  font-weight: 600;
  color: rgb(0, 0, 0);
}
.demo-registerForm {
  margin-left: 8%;
  margin-top: 7%;
  width: 500px;
}
.agreement {
  margin-bottom: 2%;
  margin-left: 32%;
}
.return_login {
  margin-top: 1%;
  position: fixed;
  margin-left: 9%;
}
</style>
<style>
.labelSize .el-form-item__label {
  font-size: 20px;
  font-weight: 600;
  color: rgba(44, 44, 44, 0.678);
}
.el-message-box {
  width: 500px;
}
.pa-3 {
  margin-top: 44%;
  margin-left: 42%;
}
</style>